<nz-breadcrumb style="margin:12px 0;">
    <nz-breadcrumb-item>系统设置</nz-breadcrumb-item>
    <nz-breadcrumb-item>用户管理</nz-breadcrumb-item>
</nz-breadcrumb>
<div style="padding:24px; background: #fff; min-height: 100%;" class="animation-right">
    <button nz-button [nzType]="'primary'" [nzShape]="'circle'" (click)="showModal()">
        <i class="anticon anticon-plus"></i>
    </button>
    <nz-modal [nzVisible]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel($event)">
        <ng-template #modalTitle>
            <i class="anticon anticon-edit"></i> {{ isViewStateUpdate ? '更新用户' : '新增用户' }}
        </ng-template>
        <ng-template #modalContent>
            <form nz-form [formGroup]="userForm" (ngSubmit)="handleOk($event, userForm.value)" [nzType]="'horizontal'">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>用户名(手机号)</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('username')" [nzHasFeedback]="true">
                        <nz-input formControlName="username" [nzPlaceHolder]="'用户名(手机号)'" [nzSize]="'large'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('username').dirty && getFormControl('username').hasError('required')">请输入用户名(手机号)</div>
                        <div nz-form-explain *ngIf="getFormControl('username').dirty && getFormControl('username').hasError('minlength')">用户名不能少于11个字符</div>
                        <div nz-form-explain *ngIf="getFormControl('username').dirty && getFormControl('username').hasError('maxlength')">用户名不能超过11个字符</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>用户真实姓名</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('name')" [nzHasFeedback]="true">
                        <nz-input formControlName="name" [nzPlaceHolder]="'用户真实姓名'" [nzSize]="'large'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('name').dirty && getFormControl('name').hasError('required')">请输入用户真实姓名</div>
                        <div nz-form-explain *ngIf="getFormControl('name').dirty && getFormControl('name').hasError('minlength')">用户真实姓名不能少于2个字符</div>
                        <div nz-form-explain *ngIf="getFormControl('name').dirty && getFormControl('name').hasError('maxlength')">用户真实姓名不能超过6个字符</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>性别</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('sex')">
                        <nz-radio-group formControlName="sex">
                            <label nz-radio [nzValue]="'1'">
                              <span>男</span>
                            </label>
                            <label nz-radio [nzValue]="'2'">
                              <span>女</span>
                            </label>
                        </nz-radio-group>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>关联年级</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('gradeIds')">
                        <nz-select
                            [nzMode]="'multiple'"
                            [nzPlaceHolder]="'请选择年级'"
                            formControlName="gradeIds"
                            [nzNotFoundContent]="'没有找到对应年级'"
                            [nzShowSearch]="true">
                            <nz-option
                                *ngFor="let grade of gradeList"
                                [nzLabel]="grade.name"
                                [nzValue]="grade._id">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>关联班级</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('classIds')">
                        <nz-select
                            [nzMode]="'multiple'"
                            [nzPlaceHolder]="'请选择班级'"
                            formControlName="classIds"
                            [nzNotFoundContent]="'没有找到对应班级'"
                            [nzShowSearch]="true">
                            <nz-option
                                *ngFor="let c of classList"
                                [nzLabel]="c.name"
                                [nzValue]="c._id">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>关联科目</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('subjectIds')">
                        <nz-select
                            [nzMode]="'multiple'"
                            [nzPlaceHolder]="'请选择科目'"
                            formControlName="subjectIds"
                            [nzNotFoundContent]="'没有找到对应科目'"
                            [nzShowSearch]="true">
                            <nz-option
                                *ngFor="let subject of subjectList"
                                [nzLabel]="subject.name"
                                [nzValue]="subject._id">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>角色</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('roleId')">
                        <nz-select
                            formControlName="roleId"
                            [nzPlaceHolder]="'请选择角色'"
                            [nzNotFoundContent]="'没有找到对应角色'" 
                            [nzShowSearch]="true">
                            <nz-option
                                *ngFor="let role of roleList"
                                [nzLabel]="role.name"
                                [nzValue]="role._id">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
            </form>
        </ng-template>
        <ng-template #modalFooter>
            <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="handleCancel($event)">返 回</button>
            <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="handleOk($event, userForm.value)" [nzLoading]="isConfirmLoading"
                [disabled]="!userForm.valid">{{ isViewStateUpdate ? '更 新' : '提 交' }}</button>
        </ng-template>
    </nz-modal>
    <nz-table #nzTable [nzAjaxData]="userList" [nzShowSizeChanger]="true" [nzLoading]="_loading" [nzTotal]="_total" [(nzPageIndex)]="_current"
        (nzPageIndexChange)="getAllUsers()" [(nzPageSize)]="_pageSize" (nzPageSizeChange)="getAllUsers()" [nzShowTotal]="true">
        <thead nz-thead>
            <tr>
                <th nz-th></th>
                <th nz-th>
                    <span>用户名</span>
                </th>
                <th nz-th>
                    <span>真实姓名</span>
                </th>
                <th nz-th>
                    <span>性别</span>
                </th>
                <th nz-th>
                    <span>关联年级</span>
                </th>
                <th nz-th>
                    <span>关联班级</span>
                </th>
                <th nz-th>
                    <span>关联科目</span>
                </th>
                <th nz-th>
                    <span>角色</span>
                </th>
                <th nz-th>
                    <span>创建日期</span>
                </th>
                <th nz-th>
                    <span>操作</span>
                </th>
            </tr>
        </thead>
        <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let user of nzTable.data; let i = index;">
                <td nz-td>{{ i + 1 }}</td>
                <td nz-td>{{ user.username }}</td>
                <td nz-td>{{ user.name }}</td>
                <td nz-td>{{ user.sex === 1 ? '男' : '女' }}</td>
                <td nz-td>{{ user.gradeIds }}</td>
                <td nz-td>{{ user.classIds }}</td>
                <td nz-td>{{ user.subjectIds }}</td>
                <td nz-td>{{ user.roleId.name }}</td>
                <td nz-td>{{ user.createDate | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
                <td nz-td>
                    <button nz-button class="ant-btn" [nzType]="'primary'" (click)="showModal(user._id)">
                        <i class="anticon anticon-edit"></i>
                    </button>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>